import React, { Component } from "react";
import PropTypes from "prop-types";
// components
import CardHeader from "../../components/CardHeader/index";


export default class DeptContrast extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const { deptCompare = [], chooseDept } = this.props || {};
        const compareList = deptCompare.map((item, index) => {
            const percent = Number(item.entryNum) / (Number(item.entryNum) + Number(item.dismissionNum));
            const progress = percent < 0 ? 0 : percent * 100;
            return (
                <div className="compare" key={index} onClick={() => {
                    window._rlog(`_weekly_branch`);
                    chooseDept(item.deptId)
                }}
                >
                    <span className="left-wrap">
                        <span className="serial-num">{index + 1 < 10 ? ('0' + (index + 1)) : index + 1}</span>
                        <span className="dept-name">{item.deptName}</span>
                    </span>
                    <span className="right-wrap">
                        <span className="entry-num">{item.entryNum}</span>
                        <span className="contrast-line">
                            <i style={{ 
                                width: `${item.entryNum === 0 && item.dismissionNum === 0 ? 50 : progress}%` 
                            }}></i>
                        </span>
                        <span className="dismission-num">{item.dismissionNum}</span>
                    </span>
                </div>
            )
        })
        return (
            <div className="dept-contrast">
                <CardHeader title={"部门入离职对比"} />

                <div className="contrast">
                    <div className="contrast-header">
                        <div className="left-wrap">
                            <span className="dept">部门</span>
                        </div>
                        <div className="right-wrap">
                            <span className="entry">入职人数</span>
                            <span className="dismission">离职人数</span>
                        </div>
                    </div>
                    {
                        deptCompare.length > 0 ?
                            <div className="contrast-con">
                                {compareList}
                            </div> :
                            <div className="data-null">
                                无下级部门
                            </div>
                    }

                </div>
            </div>
        );
    }
}
DeptContrast.propTypes = {

};
